<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style type="text/css">
       ul li{list-style: none;
            display: inline-block;
            background: #888888;
           padding: 5px 5px;
            font-size: 16px;
            color: #ffffff;
        }
        ol{
            list-style: none;
            margin-left: 40px;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <span>搜索：<input type="text" v-model="value"></span>
        <li @click="shang">价格升序</li>
        <li @click="xia">价格降序</li>
        <li @click="moren">默认排序</li>
    </ul>
    <ol>
        <li v-for="(item,index) in fion">{{index}}--{{item.name}}--{{item.price}}</li>
    </ol>
</div>
<script src="./vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return {
                list:[
                    {name:'小米手机',price:'3000'},
                    {name:'华为手机',price:'5000'},
                    {name:'VIVO手机',price:'4000'},
                    {name:'一加五手机',price:'6000'}
                ],
                value:'',
            }
        },
        mounted(){
            // this.fion();
        },
        computed:{
            // 计算属性（过滤） 查询功能
            fion:function(){
                let arr =[];
                let _this = this
                for(let i=0;i<_this.list.length;i++){
                    // console.log(i)
                    //   console.log(_this)
                    if(this.list[i].name.indexOf(_this.value)!=-1){
                        arr.push(_this.list[i])
                    }
                }
                return arr;
            }

            // fion(){
            //       var abs = this.list;
            //       var _this = this;
            //     // console.log(abs
            //         for (let i=0; i<abs.length;i++){
            //             // console.log(abs[i].name.indexOf(_this.value));
            //               abs.filter(function () {
            //                   // console.log(abs[i].name.indexOf(_this.value)!=-1)
            //                 return abs[i].name.indexOf(_this.value)!=-1;
            //               }
            //               );
            //     }
            //  }
        },
        methods:{
            shang(){
                this.list.sort((a,b)=>{
                    // console.log(b)
                    return a.price - b.price;//升序
                })
            },
            xia(){
                this.list.sort((a,b)=>{
                    return b.price - a.price;//降序
                })
            },
            moren(){
                return location.reload();//刷新页面
            },

        }
    })
</script>
</body>
</html>